<<<<<<< HEAD
=======

>>>>>>> ab55ee21fe0791f464e2a40c61a0e263b8585187
<template>
	<div id="discoverBox">
		<div class="discoverHeader">
			<span class="haderSpan"><</span>
			发现
		</div>
		<div class="discoverActive">
			<div class="discoverActiveEvery">
				<div class="discoverActiveEveryLeft">
					<p class="discoverActiveEveryP1" id="dP1">积分商城</p>
					<p class="discoverActiveEveryP2">0元好物在这里</p>
				</div>
				<div class="discoverActiveEveryRight">
					<img src="https://fuss10.elemecdn.com/8/38/9c9aea0e856149083d84af3444b78jpeg.jpeg" />
				</div>
				
			</div>
			
			<div class="discoverActiveEvery">
				<div class="discoverActiveEveryLeft">
					<p class="discoverActiveEveryP1" id="dP2">美味爆料</p>
					<p class="discoverActiveEveryP2">网红都看哭了</p>
				</div>
				<div class="discoverActiveEveryRight">
					<img src="https://fuss10.elemecdn.com/e/ff/3b9c4a4dfda1df548dc9274f6a7c1jpeg.jpeg" />
				</div>
			</div>
			<div class="discoverActiveEvery">
				<div class="discoverActiveEveryLeft">
					<p class="discoverActiveEveryP1" id="dP3">推荐有奖</p>
					<p class="discoverActiveEveryP2">5元现金拿不停</p>
				</div>
				<div class="discoverActiveEveryRight">
					<img src="https://fuss10.elemecdn.com/6/76/8d42eef97ff4c1c2b671085358541jpeg.jpeg" />
				</div>
			</div>
			<div class="discoverActiveEvery">
				<div class="discoverActiveEveryLeft">
					<p class="discoverActiveEveryP1" id="dP4">有红包快抢</p>
					<p class="discoverActiveEveryP2">礼包福利领不停</p>
				</div>
				<div class="discoverActiveEveryRight">
					<img src="https://fuss10.elemecdn.com/f/85/2bb180f2052c33cfec3852ef2bfccjpeg.jpeg" />
				</div>
			</div>
		</div>
		
		<div class="divideline"></div>
		
		<div class="discoverPic">
			<img src="https://fuss10.elemecdn.com/b/6d/656006edcd86033a1b32b23ddea37jpeg.jpeg" />
		</div>
		<div class="divideline"></div>
		<div class="foodtuijian">
			<div class="foodtitle">
				<div>
					<img class="jiantou1" src="../../assets/image/jiantou1.png"/>
					<img class="conpic" src="../../assets/image/meishituijian.png" />美食热推
					<img class="jiantou2" src="../../assets/image/jiantou2.png"/>
				</div>
				<p class="foodP">你的口味,我们都懂</p>
			</div>
			<div class="foods">
				<div class="foodsEvery">
					<img src="https://fuss10.elemecdn.com/0/fa/91e554c51f7e8a97f73c2d972aa08jpeg.jpeg" />
					<p class="foodName">
						照烧鸡腿
					</p>
					<span class="foodPrice">￥5</span>
				</div>
				<div class="foodsEvery">
					<img src="https://fuss10.elemecdn.com/5/0c/49bd2986c9baef7efcceec6f63b4bjpeg.jpeg" />
					<p class="foodName">椒盐鸡块</p>
					<span class="foodPrice">￥6</span>
				</div>
				<div class="foodsEvery">
					<img src="https://fuss10.elemecdn.com/0/ac/5304586bb8e6c3684a0b9b74f4fa6jpeg.jpeg"/>
					<p class="foodName">鳗鱼饭</p>
					<span class="foodPrice">￥88</span>
				</div>
			</div>
			<div class="findMore">查看更多 ></div>
		</div>
		<div class="divideline"></div>
		<div class="tiantiantejia">
			<div class="foodtitle">
				<div>
					<img class="jiantou1" src="../../assets/image/jiantou1.png"/>
					<img class="conpic" src="../../assets/image/meishituijian.png" />天天特价
					<img class="jiantou2" src="../../assets/image/jiantou2.png"/>
				</div>
				<p class="foodP">特价商品,一网打尽</p>
			</div>
			<div class="tejiafoods">
				<div class="foodsEvery">
					<img src="https://fuss10.elemecdn.com/4/44/fec3de2317cfeb774b9f55b3bbda1jpeg.jpeg" />
					<p class="foodName">
						霸气西瓜
					</p>
					<span class="foodPrice">￥12.8</span>
					<s class="oldPrice">￥16</s>
				</div>
				<div class="foodsEvery">
					<img src="https://fuss10.elemecdn.com/0/e1/984b6f1647224fb048eed749aaa94jpeg.jpeg" />
					<p class="foodName">招牌水果捞</p>
					<span class="foodPrice">￥21.6</span>
					<s class="oldPrice">￥36</s>
				</div>
				<div class="foodsEvery">
					<img src="https://fuss10.elemecdn.com/0/ac/5304586bb8e6c3684a0b9b74f4fa6jpeg.jpeg"/>
					<p class="foodName">草莓欧蕾/中杯</p>
					<span class="foodPrice">￥9.1</span>
					<s class="oldPrice">￥13</s>
				</div>
			</div>
			<div class="findMore">查看更多 ></div>
		</div>
		<div class="divideline"></div>
		<div class="xianshihaoli">
			<div class="foodtitle">
				<div>
					<img class="jiantou1" src="../../assets/image/jiantou1.png"/>
					<img class="conpic" src="../../assets/image/meishituijian.png" />限时豪礼
					<img class="jiantou2" src="../../assets/image/jiantou2.png"/>
				</div>
				<p class="foodP">小积分换豪礼</p>
			</div>
			<div class="tejiafoods">
				<div class="foodsEvery">
					<span class="duihuanActive">抽奖活动</span>
					<img src="https://fuss10.elemecdn.com/0/53/47a80976e90c99f40b745cde5246fjpeg.jpeg" />
					<p class="foodName">
						iPhone7 32G
					</p>
					<span class="foodPrice">399积分</span>
					<s class="oldPrice">￥4999</s>
				</div>
				<div class="foodsEvery">
					<span class="duihuanActive">0元抽奖</span>
					<img src="https://fuss10.elemecdn.com/8/1e/1f4fdd026e7a1550490515df1c899jpeg.jpeg" />
					<p class="foodName">3C爆款转出来！</p>
					<span class="foodPrice">399积分</span>
					
				</div>
				<div class="foodsEvery">
					<span class="duihuanActive">0元兑换</span>
					<img src="https://fuss10.elemecdn.com/0/c9/1b2af1356945e512d32ef2203fcd5jpeg.jpeg"/>
					<p class="foodName">PPTV聚力VIP月卡</p>
					<span class="foodPrice">299积分</span>
					<s class="oldPrice">￥20</s>
				</div>
			</div>
			<div class="findMore">查看更多 ></div>
		</div>
		<!--<div class="divideline"></div>-->
	</div>
</template>

<script>
</script>

<style>
	#discoverBox{
		width:100%;
	}
	.discoverHeader{
		width:100%;
		height:1.1875rem;
		background-color: #008fff;
		color:white;
		font-size: .5rem;
		line-height: 1.1875rem;
		text-align: center;
	}
	.discoverHeader span{
		display:inline-block ;
		position: absolute;
		left:0.1875rem;
		font-size: .7rem;
	}
	.discoverActive{
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		background-color: #ededed;
	}
	.discoverActiveEvery{
		width:49.7%;
		height: 2.3125rem;
		background-color: white;
		margin-bottom: 0.03125rem;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}
	.discoverActiveEveryLeft{
		width:60%;
		margin-left: 0.3125rem;
		margin-top:0.625rem;
	}
	.discoverActiveEveryP1{
		font-size: .5rem;
	}
	.discoverActiveEveryRight{
		flex-grow: 1;
		height: 2.3125rem;
		display: flex;
		justify-content:center;
		align-items: center;
	}
	.discoverActiveEveryRight img{
		width:1.3125rem;
		height:1.1875rem;
		
	}
	.discoverActiveEveryP2{
		color:#999999;
		font-size: .3rem;
	}
	#dP1{
		color:#f5785d;
	}
	#dP2{
		color:#1bb1e8;
	}
	#dP3{
		color:#94a9e2;
	}
	#dP4{
		color:#c1d226;
	}
	
	.divideline{
		height:0.375rem;
		width: 100%;
		background-color: #f5f5f5;
	}
	.discoverPic{
		width:100%;
		height:2.34375rem;
		
	}
	.discoverPic img{
		width:100%;
		height:100%;
	}
	.foodtuijian,.tiantiantejia,.xianshihaoli{
		width:100%;
		/*height:7.625rem;*/
		
	}
	.foodtitle{
		vertical-align: middle;
		font-size: .48rem;
		font-weight: bold;
		text-align: center;
		margin-top: 0.375rem;
	}
	.conpic{
		width:0.5rem;
		height:0.5rem;
		vertical-align: middle;
	}
	.jiantou1{
		width:0.43rem;
		height:0.12rem;
		vertical-align: middle;
	}
	.jiantou2{
		width:0.5rem;
		height:0.25rem;
		vertical-align: middle;
	}
	.foodP{
		text-align: center;
		font-size: 0.3rem;
		color:#999;
	}
	.foods,.tejiafoods{
		display:flex ;
		justify-content: space-around;
		padding-left: 0.375rem;
		padding-right: 0.375rem;
	}
	.foodsEvery {
		position:relative;
	}	
	.foodsEvery img{
		width:2.8125rem;
		height: 2.8125rem;
		margin-bottom: 0.15625rem;
		margin-top: 0.46875rem;
	}
	.duihuanActive{
		position: absolute;
		top:0.15625rem;
		left:0;
		color:white;
		background-color: #413d3c;
		font-size: .3rem;
		border: 5px solid #413d3c;
		border-radius:0.0625rem;
		
	}
	.foodName{
		font-size: .35rem;
	}
	.foodPrice{
		display: inline-block;
		color:red;
		font-size: .3rem;
		margin-top: 0.15625rem;
	}
	.findMore{
		color: #999;
		text-align: center;
		margin-bottom: 0.3125rem;
		margin-top: 0.3125rem;
	}
	.oldPrice{
		color:#999; 
		font-size: .3rem;
	}
</style>